<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>第一种头部</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f7f7f7;
            line-height: 1;
        }
        /*搜索框*/

        .search_box {
            background-color: #fff;
            padding: 0.2rem 0.75rem;
            padding-top: calc(25px + 0.3rem);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .search {
            flex: 1;
            background-color: #f3efee;
            display: flex;
            align-items: center;
            padding: 0.4rem 0.2rem;
            margin-right: 0.2rem;
        }

        .search img {
            width: 1rem;
            margin-right: 0.2rem;
        }

        .search input {
            line-height: 1rem;
            height: 1rem;
        }

        .cancel_btn {
            font-size: 0.8rem;
            color: #333;
        }
        /*搜索提示*/

        .search_sec1 .aui-tab-item.aui-active {
            border-bottom: none;
        }

        .search_sec1 .aui-tab-item a {
            color: #666;
            font-size: 0.7rem;
            font-weight: 600;
        }

        .search_sec1 .aui-tab-item.aui-active a {
            color: #f23030;
            border-bottom: 2px solid #f23030;
        }
        /*.search_sec1 .aui-tab-item.aui-active a{
          border-bottom: none;
        }*/

        .search_sec2 .aui-tab-item.aui-active {
            color: #ff0137;
            border-bottom: 2px solid transparent;
        }

        .search_sec2 .aui-tab-item {
            color: #999;
        }

        .search_sec2 .aui-tab-item.up_down::before {
            content: '';
            border: 4px solid transparent;
            border-bottom: 5px solid #999;
            position: absolute;
            left: 72%;
            top: 0;
            bottom: 0px;
            margin: auto;
            height: 0;
            width: 0;
            transform: translateY(-60%);
        }

        .search_sec2 .aui-tab-item.up_down::after {
            content: '';
            border: 4px solid transparent;
            border-top: 5px solid #999;
            position: absolute;
            left: 72%;
            top: 0;
            bottom: 0;
            margin: auto;
            height: 0;
            width: 0;
            transform: translateY(60%);
        }

        .search_sec2 .aui-tab-item.aui-active.up_down.up::before {
            border-bottom-color: #ff0137;
        }

        .search_sec2 .aui-tab-item.aui-active.up_down.down::after {
            border-top-color: #ff0137;
        }

        .search_sec2 {
            margin-top: 0.5rem;
            background: #fff;
            padding: 0rem;
        }

        .search_sec2_txt {
            background: #f7f7f7;
        }

        .search_sec2_txt .aui-content-padded {
            margin: 0;
        }

        .search_sec2_txt .aui-content-padded .aui-col-xs-6 {
            padding: 0 0.2rem;
            margin-bottom: 0.4rem;
        }

        .search_sec2_txt1 {
            padding: 0.8rem 0.4rem;
            background: #fff;
        }

        .product_title {
            font-size: 0.6rem;
            line-height: 1.0rem;
            color: #666;
            font-weight: 400;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }

        .product_price1 {
            font-size: 0.6rem;
            color: #f23030;
            font-weight: 400;
            margin-top: 0.4rem;
            margin-bottom: 0.6rem;
        }

        .near_price {
            font-size: 1rem;
            color: #f23030;
            line-height: 1.5rem;
        }

        .near_price i {
            font-size: 0.6rem;
            line-height: 0.6rem;
            height: 0.6rem;
            color: #666;
            font-style: normal;
            margin-left: 0.1rem;
            margin-top: 0.55rem;
        }

        .aui-list .aui-list-item-text.near_jj {
            height: 1rem;
            line-height: 1rem;
            overflow: hidden;
        }

        .aui-list .aui-list-item-text.near_pj {
            height: 1rem;
            line-height: 1rem;
            overflow: hidden;
            -webkit-box-pack: initial;
            -webkit-justify-content: initial;
            justify-content: initial;
            margin-top: 0.5rem;
        }

        .aui-list .aui-list-item-text.near_pj img {
            width: 0.6rem;
            margin-right: 0.2rem;
            display: inline-block;
        }

        .near .near_title {
            position: relative;
            padding: 0.5rem 0.75rem;
            width: 100%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-flex: 1;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            background: #fff;
        }

        .near .near_title_r {
            margin-right: 1rem;
            font-size: 0.7rem;
            color: #666;
            /*position: relative;*/
        }

        .near .near_title_r::before {
            -webkit-transform: rotateZ(315deg);
            transform: rotateZ(315deg);
            margin-top: -0.3rem;
            content: '';
            width: 0.4rem;
            height: 0.4rem;
            position: absolute;
            top: 50%;
            right: 0.75rem;
            background: transparent;
            border: 1px solid #dddddd;
            border-top: none;
            border-right: none;
            z-index: 2;
            -webkit-border-radius: 0;
            border-radius: 0;
            transition: all 0.4s ease;
            -webkit-transition: all 0.4s ease;
        }

        .near .near_title span {
            font-size: 0.7rem;
            color: #666;
        }

        .near .near_title span.active {
            font-weight: bold;
            font-size: 0.8rem;
            color: #333;
        }

        .aui-col-xs-3:nth-child(4n + 1) {
            clear: both;
        }

        .near_sort_list {
            width: 100%;
            background: #fff;
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s ease;
            -webkit-transition: all 0.4s ease;
            position: absolute;
            ;
            z-index: 9;
        }

        .near_sort_list li {
            border-bottom: 1px solid #e8e8e8;
            padding: 0.5rem 0.75rem;
            font-size: 0.6rem;
        }

        .near.sort .near_sort_list {
            max-height: 500px;
        }

        .near.sort .near_title_r::before {
            -webkit-transform: rotateZ(135deg);
            transform: rotateZ(135deg);
        }

        .near_xiaoliang {
            font-size: 0.6rem;
        }

        .products .img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="search_box">
            <div class="search">
                <img src="../../image/four/search.png" alt="" @click="goSearch()">
                <input type="text" name="" value="" placeholder="请输入您要搜索的商品" v-model="keywords" id="keyword">
            </div>
            <div class="cancel_btn" onclick="close_win()">取消</div>
        </div>
        <div class="search_content">
            <div class="search_sec1">
                <div class="aui-tab" id="tab">
                    <div class="aui-tab-item aui-active"><a href="javascript:void(0);">商品</a></div>
                    <div class="aui-tab-item"><a href="javascript:void(0);">源头产品</a></div>
                    <div class="aui-tab-item"><a href="javascript:void(0);">本地服务</a></div>
                </div>
            </div>
            <div class="search_sec2_tab">
                <div class="search_sec2 search_sec2_tab1" v-if="flag1">
                    <div class="aui-tab" id="tab1">
                        <div class="aui-tab-item aui-active">综合</div>
                        <div class="aui-tab-item">销量</div>
                        <div class="aui-tab-item">最新</div>
                        <div class="aui-tab-item up_down">价格</div>
                    </div>
                    <div class="search_sec2_txt products" v-if="productList && productList.length > 0">
                        <div class="aui-content-padded">
                            <div class="aui-row-padded clearfix" style="padding:0.5rem 0.2rem">
                                <div class="aui-col-xs-6" v-for="item in productList" @click="open_shop_detail(item.goods_name,item.goods_id)">
                                    <div class="img" :style="'background:url('+item.logo_pic+') no-repeat center; background-size:cover'">
                                        <!-- <img :src="item.logo_pic" /> -->
                                    </div>
                                    <div class="search_sec2_txt1">
                                        <div class="product_title">
                                            {{item.goods_name}}
                                        </div>
                                        <div class="product_price1">¥ {{item.price}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="search_sec2 search_sec2_tab2" v-if="flag2">
                    <div class="aui-tab" id="tab2">
                        <div class="aui-tab-item aui-active">综合</div>
                        <div class="aui-tab-item">销量</div>
                        <div class="aui-tab-item">评分</div>
                        <div class="aui-tab-item up_down">价格</div>
                    </div>
                    <div class="search_sec2_txt" v-if="shopList && shopList.length > 0">
                        <div class="aui-content">
                            <ul class="aui-list aui-media-list">
                                <li class="aui-list-item" v-for="item1 in shopList" @click="open_dp_detail(item1.name,item1.store_id)">
                                    <div class="aui-media-list-item-inner">
                                        <div class="aui-list-item-media">
                                            <div :style="'background:url('+item1.logo+') no-repeat center; background-size:cover;width:4rem;height:4rem;'"></div>
                                        </div>
                                        <div class="aui-list-item-inner">
                                            <div class="aui-list-item-text">
                                                <div class="aui-list-item-title">{{item1.name}}</div>
                                            </div>
                                            <div class="aui-list-item-text near_pj" v-if="(item1.fraction - 0) >= 0">
                                                <img src="../../image/two/star-on.png" alt="" v-for="n in (item1.fraction - 0)">
                                                <img src="../../image/two/star-off.png" alt="" v-for="n in (5 - (item1.fraction - 0))">{{item1.fraction}}
                                            </div>
                                            <div class="aui-info aui-margin-t-5" style="padding:0.5rem 0 0;">
                                                <div class="aui-info-item">
                                                    <span class="near_price">￥{{item1.price}}<i>起</i></span>
                                                </div>
                                                <div class="aui-info-item near_xiaoliang">月销1000笔</div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="search_sec2 search_sec2_tab3" v-if="flag3">
                    <div class="aui-tab" id="tab3">
                        <div class="aui-tab-item aui-active">综合</div>
                        <div class="aui-tab-item">销量</div>
                        <div class="aui-tab-item">评分</div>
                        <div class="aui-tab-item up_down">价格</div>
                        <div class="aui-tab-item up_down">距离</div>
                    </div>
                    <div class="search_sec2_txt" v-if="shopList && shopList.length > 0">
                        <div class="aui-content">
                            <ul class="aui-list aui-media-list">
                                <li class="aui-list-item" v-for="item2 in shopList" @click="open_dp_detail(item2.name,item2.store_id)">
                                    <div class="aui-media-list-item-inner">
                                        <div class="aui-list-item-media">
                                            <div :style="'background:url('+item2.logo+') no-repeat center; background-size:cover;width:4rem;height:4rem;'"></div>
                                        </div>
                                        <div class="aui-list-item-inner">
                                            <div class="aui-list-item-text">
                                                <div class="aui-list-item-title">{{item2.name}}</div>
                                                <div class="aui-list-item-right">{{item2.distance}}</div>
                                            </div>
                                            <div class="aui-list-item-text near_pj" v-if="(item2.fraction - 0) >= 0">
                                                <img src="../../image/two/star-on.png" alt="" v-for="n in (item2.fraction - 0)">
                                                <img src="../../image/two/star-off.png" alt="" v-for="n in (5 - (item2.fraction - 0))">{{item2.fraction}}
                                            </div>
                                            <div class="aui-info aui-margin-t-5" style="padding:0.5rem 0 0;">
                                                <div class="aui-info-item">
                                                    <span class="near_price">￥{{item2.price}}<i>起</i></span>
                                                </div>
                                                <div class="aui-info-item near_xiaoliang">月销{{item2.sales}}笔</div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    var app;
    apiready = function() {
        // navTab1();
        // navTab2();
        // alert(api.pageParam.type);
        app = new Vue({
            el: '#app',
            data: {
                type1:1,
                type:api.pageParam.type,
                is_local1: '',
                flag1: true,
                flag2: false,
                flag3: false,
                keywords: api.pageParam.keywords,
                sort: 1,
                store_id: api.pageParam.store_id,
                productList: [],
                shopList: [],
                flag:api.pageParam.flag,
            },
            created: function() {
                var $_this = this;
                if($_this.flag==1){
                  $_this.setType(1, '', 1)
                  $_this.getProductList();
                }else if($_this.flag==2){
                  $_this.setType(2, 0, 2)
                  $_this.getShopList();
                }else if($_this.flag==3){
                  $_this.setType(2, 1, 3)
                  $_this.getShopList();
                }
                // $_this.getProductList();

                // $_this.setClass();

                // alert($_this.flag);
            },
            mounted: function() {
                var $_this = this;
                navTab();
                api.hideProgress();
                $_this.tabNav1();
                $_this.enterKey();
                // $_this.tabNav2();
                // $_this.tabNav3();

            },
            watch: {
                sort: function() {
                    var $_this = this;
                    if ($_this.type1 == 1) {
                        $_this.getProductList();
                    } else if ($_this.type1 == 2) {
                        $_this.getShopList();
                    }
                }
            },
            methods: {
                setType: function(type, isLocal, num) {
                    $_this = this;
                    $_this.type1 = type;
                    $_this.is_local1 = isLocal;
                    if (num == 1) {
                        $_this.flag1 = true;
                        $_this.flag2 = false;
                        $_this.flag3 = false;
                    } else if (num == 2) {
                        $_this.flag1 = false;
                        $_this.flag2 = true;
                        $_this.flag3 = false;
                    } else if (num == 3) {
                        $_this.flag1 = false;
                        $_this.flag2 = false;
                        $_this.flag3 = true;
                    }

                    if ($_this.type1 == 1) {
                        $_this.getProductList();
                    } else if ($_this.type1 == 2) {
                        $_this.getShopList();
                    }
                },
                getProductList: function() {
                    var $_this = this;
                    api.ajax({
                        url: window.Url.Freesearch_goods_index,
                        method: 'post',
                        data: {
                            values: {
                                token: '',
                                keywords: $_this.keywords,
                                type: $_this.type,
                                sort: $_this.sort,
                                store_id: $_this.store_id
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            // console.log(JSON.stringify(ret.data))
                            if (ret.re == 1) {
                                $_this.productList=[];
                                $_this.productList = ret.data;

                                $_this.$nextTick(function() {
                                        $('.products .img').height($('.products .img').width());
                                        // $_this.tabNav1();
                                })
                                    // console.log(JSON.stringify(ret.data))
                            } else {
                                $_this.productList=[];
                                api.toast({
                                    msg: ret.info,
                                    duration: 2000,
                                    location: 'bottom'
                                });
                            }

                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    })
                },
                getShopList: function() {
                    var $_this=this;
                    api.ajax({
                        url: window.Url.Freesearch_store_index,
                        method: 'post',
                        data: {
                            values: {
                                token: '',
                                keywords: $_this.keywords,
                                is_local: $_this.is_local1,
                                sort: $_this.sort,
                                province: $api.getStorage('province'),
                                city: $api.getStorage('city'),
                                longitude: $api.getStorage('longitude'),
                                latitude: $api.getStorage('latitude')
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            // console.log(JSON.stringify(ret.data))
                            if (ret.re == 1) {
                                $_this.shopList=[];
                                $_this.shopList = ret.data;

                                $_this.$nextTick(function() {
                                    // $('.products .img').height($('.products .img').width());
                                    // $_this.tabNav2();
                                    // $_this.tabNav3();
                                })

                                // console.log(JSON.stringify(ret.data))
                            } else {
                                $_this.shopList=[];
                                api.toast({
                                    msg: ret.info,
                                    duration: 2000,
                                    location: 'bottom'
                                });
                            }

                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    })
                },
                tabNav1: function() {
                    var $_this = this;
                    var prevIndex = 1
                    var tab1 = new auiTab({
                        element: document.getElementById("tab1"),
                        repeatClick: true
                    }, function(ret) {
                        if (ret.index == 1) {
                            $('.search_sec2_tab1 .aui-tab-item').eq(3).removeClass('up, down')
                            $_this.sort = 1
                        } else if (ret.index == 2) {
                            $('.search_sec2_tab1 .aui-tab-item').eq(3).removeClass('up, down')
                            $_this.sort = 2
                        } else if (ret.index == 3) {
                            $('.search_sec2_tab1 .aui-tab-item').eq(3).removeClass('up, down')
                            $_this.sort = 3
                        } else if (ret.index == 4) {
                            if (prevIndex == ret.index) {
                                $('.search_sec2_tab1 .aui-tab-item').eq(3).toggleClass('up')
                                $('.search_sec2_tab1 .aui-tab-item').eq(3).toggleClass('down')
                                if ($('.search_sec2_tab1 .aui-tab-item').eq(3).hasClass('up')) {
                                    $_this.sort = 4
                                } else {
                                    $_this.sort = 5
                                }
                            } else {
                                $('.search_sec2_tab1 .aui-tab-item').eq(3).addClass('up')
                                $_this.sort = 4
                            }
                        }
                        prevIndex = ret.index
                    });
                },
                tabNav2: function() {
                    var $_this = this;
                    var prevIndex = 1
                    var tab2 = new auiTab({
                        element: document.getElementById("tab2"),
                        repeatClick: true
                    }, function(ret) {
                        if (ret.index == 1) {
                            $('.search_sec2_tab2 .aui-tab-item').eq(3).removeClass('up, down')
                            $_this.sort = 1
                        } else if (ret.index == 2) {
                            $('.search_sec2_tab2 .aui-tab-item').eq(3).removeClass('up, down')
                            $_this.sort = 2
                        } else if (ret.index == 3) {
                            $('.search_sec2_tab2 .aui-tab-item').eq(3).removeClass('up, down')
                            $_this.sort = 3
                        } else if (ret.index == 4) {
                            if (prevIndex == ret.index) {
                                $('.search_sec2_tab2 .aui-tab-item').eq(3).toggleClass('up')
                                $('.search_sec2_tab2 .aui-tab-item').eq(3).toggleClass('down')
                                if ($('.search_sec2_tab2 .aui-tab-item').eq(3).hasClass('up')) {
                                    $_this.sort = 4
                                } else {
                                    $_this.sort = 5
                                }
                            } else {
                                $('.search_sec2_tab2 .aui-tab-item').eq(3).addClass('up')
                                $_this.sort = 4
                            }
                        }
                        prevIndex = ret.index
                    });
                },
                tabNav3: function() {

                    var $_this = this;
                    var prevIndex = 1
                    var tab3 = new auiTab({
                        element: document.getElementById("tab3"),
                        repeatClick: true
                    }, function(ret) {
                        if (ret.index == 1) {
                            // alert(1);
                            $('.search_sec2_tab3 .aui-tab-item').eq(3).removeClass('up, down')
                            $('.search_sec2_tab3 .aui-tab-item').eq(4).removeClass('up, down')
                            $_this.sort = 1
                        } else if (ret.index == 2) {
                            $('.search_sec2_tab3 .aui-tab-item').eq(3).removeClass('up, down')
                            $('.search_sec2_tab3 .aui-tab-item').eq(4).removeClass('up, down')
                            $_this.sort = 2
                        } else if (ret.index == 3) {
                            $('.search_sec2_tab3 .aui-tab-item').eq(3).removeClass('up, down')
                            $('.search_sec2_tab3 .aui-tab-item').eq(4).removeClass('up, down')
                            $_this.sort = 3
                        } else if (ret.index == 4) {
                            $('.search_sec2_tab3 .aui-tab-item').eq(4).removeClass('up, down')
                            if (prevIndex == ret.index) {
                                $('.search_sec2_tab3 .aui-tab-item').eq(3).toggleClass('up')
                                $('.search_sec2_tab3 .aui-tab-item').eq(3).toggleClass('down')
                                if ($('.search_sec2_tab3 .aui-tab-item').eq(3).hasClass('up')) {
                                    $_this.sort = 4
                                } else {
                                    $_this.sort = 5
                                }
                            } else {
                                $('.search_sec2_tab3 .aui-tab-item').eq(3).addClass('up')
                                $_this.sort = 4
                            }
                        } else if (ret.index == 5) {
                            $('search_sec2_tab3 .aui-tab-item').eq(3).removeClass('up, down')
                            if (prevIndex == ret.index) {
                                $('.search_sec2_tab3 .aui-tab-item').eq(4).toggleClass('up')
                                $('.search_sec2_tab3 .aui-tab-item').eq(4).toggleClass('down')
                                if ($('.search_sec2_tab3 .aui-tab-item').eq(4).hasClass('up')) {
                                    $_this.sort = 6
                                } else {
                                    $_this.sort = 7
                                }
                            } else {
                                $('.search_sec2_tab3 .aui-tab-item').eq(4).addClass('up')
                                $_this.sort = 6
                            }
                        }
                        prevIndex = ret.index
                    });
                },
                enterKey:function(){
                  $_this=this;
                  $("#keyword").on('keypress', function(e) {    //#keyword为input文本框
                  	var keycode = e.keyCode;
                  	var searchName = $(this).val();
                  	if(keycode == '13') {
                      if ($_this.type1==1) {
                          $_this.getProductList();
                      } else if ($_this.type1==2) {
                          $_this.getShopList();
                      }
                  	}
                  });
                },
                goSearch:function(){
                  $_this=this;
                  if ($_this.type1==1) {
                      $_this.getProductList();
                  } else if ($_this.type1==2) {
                      $_this.getShopList();
                  }
                },

                // 打开商品详情页
                open_shop_detail:function(goods_name,goods_id){
                  api.openWin({
                      name: 'commodity',
                      url: '../one_frame/commodity.html',
                      pageParam: {
                          name: goods_name,
                          id: goods_id
                      }
                  });
                },
                // 打开对应的店铺
                open_dp_detail:function(dp_name,dp_id){
                  api.openWin({
                      name: 'shop_inner',
                      url: '../two_frame/two_frame_header.html',
                      pageParam: {
                          type: 'shop_inner',
                          name: dp_name,
                          id: dp_id
                      }
                  })
                }

            }
        })
    };


    // 关闭当前窗口
    function close_win() {
        api.closeWin({});
    }

    function navTab() {
        var tab = new auiTab({
            element: document.getElementById("tab"),
            index: api.pageParam.flag,
            repeatClick: false
        }, function(ret) {
            // console.log(JSON.stringify(ret));
            if (ret.index == 1) {
                app.setType(1, '', 1);
                setTimeout(function() {
                    app.tabNav1();
                }, 100)

            } else if (ret.index == 2) {
                app.setType(2, 0, 2);
                setTimeout(function() {
                    app.tabNav2();
                }, 100)
                app.tabNav2();
            } else if (ret.index == 3) {
                app.setType(2, 1, 3);
                setTimeout(function() {
                    app.tabNav3();
                }, 100)

            }
        });
    }




</script>

</html>
